<template>
    <div class="accountMain whiteBg">
        <div class="withDrawMain padding50">
            <div class="withDrawMainTit">提现</div>
            <div class="withDrawMainBox">
                <el-form :label-position="labelPosition" label-width="120px" :model="formWithDraw" ref="formWithDraw" :rules="rules" class="myForm">
                    <div class="withdrawMainList marginBottom10">
                        <span class="withdrawMainListLeft">可提现金额：</span>
                        <p>{{ canWithDrawMoney.toFixed(2) }}元</p>
                    </div>
                    <div class="withdrawMainList marginBottom30" v-if="isBindCard">
                        <span class="withdrawMainListLeft withdrawMainListLeft2">提现至：</span>
                        <div class="uCard">
                            <span><img src="../../../assets/images/banklogo.png"></span>
                            <p>***************0928</p>
                            <font>储蓄卡</font>
                        </div>
                    </div>
                    <div class="withdrawMainList marginBottom30" v-else>
                        <span class="withdrawMainListLeft">可提现金额：</span>
                        <div class="withDrawBind">
                            <router-link to="/bindcard"><font>+</font> 绑定银行卡</router-link>
                        </div>
                    </div>
                    <el-form-item label="提现金额：" prop="money">
                        <el-input type="text" v-model="formWithDraw.money"></el-input>
                        <div class="withDrawLast">元</div>
                    </el-form-item>
                    <div class="withdrawMainList">
                        <span class="withdrawMainListLeft">手续费：</span>
                        <p>0.00元<font>（每月免费提现5次，本月剩余4次）</font></p>
                    </div>
                    <div class="withdrawMainList marginBottom20">
                        <span class="withdrawMainListLeft">实际到账金额：</span>
                        <p>100.00元 </p>
                    </div>
                    <el-form-item label="交易密码：" prop="password">
                        <el-input type="password" v-model="formWithDraw.password"></el-input>
                        <div class="withDrawForget">
                            <router-link to="">忘记密码？</router-link>
                        </div>
                    </el-form-item>
                    <div class="withdrawMainList">
                        <el-button type="primary" @click="submitForm('formWithDraw')" class="submitButton">提交</el-button>
                    </div>
                </el-form>
            </div>
            <div class="withDrawTips">
                <span><i class="icon iconfont icon-notice"></i>温馨提示：</span>
                <ul>
                    <li>1. 当天充值金额，下个工作日（节假日顺延）才可提现；</li>
                    <li>2. 16:30之前提现，2个小时内到账，16点30之后下个工作日11点前到账；</li>
                    <li>3. 每月前5笔提现免费，超过5笔每笔体现手续费2元；</li>
                    <li>4. 体验金收益必须投资后才可以提现。（有体验金收益且未投资时显示）</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            let checkMoney = (rule, value, callback) => {
                let reg = /^[\d|\.]*$/;
                if(value==0 || !reg.test(value)){
                    return callback(new Error('请输入正确的金额'))
                }else if(value>this.canWithDrawMoney){
                    return callback(new Error('可提现金额不足'))
                }else{
                    callback();
                }
            };
            return {
                isBindCard: false,
                canWithDrawMoney: 1909.00,
                labelPosition: 'right',
                formWithDraw: {
                    money: '',
                    password: ''
                },
                rules: {
                    money: [
                        { required: true, message: '提现金额不能为空', trigger: 'blur' },
                        { validator: checkMoney, trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '交易密码不能为空', trigger: 'blur' },
                        { min: 6, max: 6, message: '交易密码为6位',trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            submitForm(formName){
                if(!this.isBindCard){
                    this.$confirm('您还未绑定银行卡哦，请绑定！','未绑卡确认',{
                        confirmButtonText: '前去邦卡',
                        cancelButtonText: '取消',
                        center: true,
                        customClass: 'myMask',
                        closeOnClickModal: true
                    }).then(()=>{
                        this.$router.push({path:'/bindcard'})
                    }).catch(()=>{
                        return
                    });
                }else{
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            alert('submit!');
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .withDrawMain{
        width: 820px;
        .withDrawMainTit{
            color: #333;
            font-size: 24px;
        }
        .withDrawMainBox{
            width: 100%;
            padding: 30px 0;
            color: #333;
            .withdrawMainList{
                padding-left: 120px;
                position: relative;
                span.withdrawMainListLeft{
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 102px;
                    text-align: right;
                    line-height: 40px;
                    padding-right: 18px;
                }
                span.withdrawMainListLeft2{
                    line-height: 50px;
                }
                &>p{
                    line-height: 40px;
                    font{
                        color: #999;
                    }
                }
                .withDrawBind{
                    a{
                        display: block;
                        width: 198px;
                        height: 38px;
                        border: 1px solid #dfdfdf;
                        color: #da5e2d;
                        text-align: center;
                        line-height: 38px;
                        &:hover{
                            background: #da5e2d;
                            border: 1px solid #da5e2d;
                            color: #fff;
                        }
                        font{
                            font-size: 18px;
                        }
                    }
                }
                .uCard{
                    border: 1px solid #dfdfdf;
                    width: 338px;
                    height: 24px;
                    padding: 12px 20px;
                    margin-bottom: 15px;
                    span{
                        display: block;
                        height: 24px;
                        float: left;
                        img{
                            display: block;;
                            height: 100%;
                        }
                    }
                    p{
                        line-height: 24px;
                        float: left;
                        color: #999;
                        margin: 0 15px;
                    }
                    font{
                        display: block;
                        padding: 0 5px;
                        height: 24px;
                        background: #ccc;
                        color: #fff;
                        float: left;
                        line-height: 24px;
                        border-radius: 3px;
                    }
                }
                .submitButton{}
            }
        }
        .withDrawTips{
            background: #fffef6;
            border: 1px solid #f5ea91;
            color: #bb6c33;
            padding: 10px 20px;
            border-radius: 3px;
            margin-top: 30px;
            font-size: 12px;
            span{
                display: block;
                margin-bottom: 10px;
                i{
                    color: #f0b158;
                    margin-right: 10px;
                }
            }
            ul{
                padding-left: 25px;
                line-height: 20px;
            }
        }
    }
    .withDrawForget{
        a{
            font-size: 12px;
            color: #ff6235;
            line-height: 26px;
            margin-left: 135px;
            &:hover{
                font-weight: bold;
            }
        }
    }
    .withDrawLast{
        position: absolute;
        left: 200px;
        top: 0;
        line-height: 40px;
    }
</style>
<style lang="scss">
    .withDrawMain{
        width: 820px;
        .withDrawMainTit{
            color: #333;
            font-size: 20px;
        }
    }
    .withDrawMainBox{
        .submitButton.el-button{
            width: 200px;
            height: 40px;
            background: #ff6235;
            color: #fff;
            font-size: 16px;
            padding: 0;
        }
        .submitButton.el-button--primary{
            border: none;
        }
        .myForm .el-form-item .el-input__inner{
            width: 190px;
        }
        .myForm .el-form-item__error{
            left: 230px;
            top: 14px;
        }
    }
</style>